<style>

.sideDivHidden
{display: none;}


.sideDivShow
{display: block;}


</style>
<script language="javascript">

function placebet_hover(obj){
  //Animation(obj).to('height', '0px').to('opacity', 0).show().go();
  
 // obj.setStyle('class', 'place-bets-hover');
  obj.addClassName('place-bets-hover');
}

//This function will hide the choosesport table/div, then show the selected sport (with the single match) for the user to select

var sportSelected = 0; //Global Variable!  There has to be a better way...
function hideChooseSport(obj, id) {
  Animation(obj).to('height', '0px').to('opacity', 0).show().go();
  switch(id)
  {
  case 3:
  		document.getElementById('basketballDiv').addClassName('sportDivShow');
  		sportSelected =3;
  		break;
  	
  case 4:
  		document.getElementById('soccerDiv').addClassName('sportDivShow');
  		sportSelected =4;
  		break;
  default:
  		break;

  }
  
}

//Global Variable!  There has to be a better way...
var selectedTeams = {};

function selectTeam(dom,matchID,teamID) {
    var index = "index" + matchID;
    var originalSelected = selectedTeams[index];
    var inputID = "bet_match_id_" + matchID + "_team_id";
    
    switch (sportSelected)
    {
    	case 3:
    	    	document.getElementById('betSideBasketball').addClassName('sideDivShow');
    			break;
    	case 4:
    	    	document.getElementById('betSideSoccer').addClassName('sideDivShow');
    			break;
    
    }
    
    if(originalSelected) {
      originalDOM = originalSelected.dom;
      originalTeamID  = originalSelected.team_id;
      originalDOM.removeClassName("team-selected");
      document.getElementById(inputID).setValue(''); //clear 
      selectedTeams[index] = null;
      if(originalTeamID == teamID) {
        return;
      }
    }
    selectedTeams[index] = {input:document.getElementById(inputID),dom: dom,team_id: teamID}
    //add css class name
    dom.addClassName("team-selected");
    $(inputID).setValue(teamID);
    
    
    //flashDiv(document.getElementById('betSideSoccer'),"#2f2f2f")

  }

  function resetBetsForm(){
    for(k in selectedTeams) {
      var team = selectedTeams[k];
      if(team) {
        team.dom.removeClassName("team-selected");
        team.input.setValue('');
        selectedTeams[k] = null;
      }
    }
    $("bets-form").reset();
    selectedSport =0;
  }
  
  
</script>



<% content_for :top do %>
<div class="tutorial-background-top">
</div> <! -- div background end-->


<div class="tutorial-background-med">
	<! -- div choosesport -->
	<div style="overflow: hidden" id="chooseSportdiv">
		<span style="color: #eee;font-size:18px">Welcome to 13wins, a sports game for you and your friends. <br/ ><br/ >Choose a Sport:<br/><br/></span>

<center><table style="width:50%" id="sportstable"> 
		<tr>
			<td onmouseover="this.addClassName('sport-hover')"
          onmouseout="this.removeClassName('sport-hover')"
          onclick="hideChooseSport(document.getElementById('chooseSportdiv'),3);return false;">
				<%=image_tag"basketball.jpg"%>
			</td>
								<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

			<td onmouseover="this.addClassName('sport-hover')"
          onmouseout="this.removeClassName('sport-hover')"
          onclick="hideChooseSport(document.getElementById('chooseSportdiv'),4);return false;">
           				<%=image_tag"football.jpg"%>
             
			</td>
		</tr>	
</table></center> 
</div>  <! -- div choosesport end-->
<! -- div basketball -->
<div class="sportDivHidden" id="basketballDiv" >
<table>
	<tr>
		<td width="75%">
			<% if @basketballMatchOfTheDay.blank? %>
  				<div style="color:#eee;font-size:18px;" class="empty">There are no basketball matches right now...</div>
			<% else %>
 				<span style="color:#eee;font-size:18px;">Try pick the winner of this game:</span><br/><br/><br/>	 
 				 <%form_tag bets_path(:sport_id=>@sportBasketball),:id=>"bets-form" do %>
  				  <%= hidden_field_tag 'referer',url_for(params) %>
  				  <% @basketballMatchOfTheDay.group_by{|match| match.begin_at.to_date }.each do |time,matches| %>
  				      <%= render :partial=>"matches/matches",:locals=>{:matches=>matches,:time=>time} %>
    				<% end %>
    			<br />
  				<%end %>
			<% end %>
		</td>
		
		<td width="15%">
			<% if !@basketballMatchOfTheDay.blank? %>
				<div id="betSideBasketball" class= "sideDivHidden" >
					<br/>
					<%= link_to_function "Place Bet","$('bets-form').submit();",:class=>"place-bets",:onmouseover=>"this.addClassName('place-bets-hover');",:onmouseout=>"this.removeClassName('place-bets-hover');"%>
					<br/>
			<% end %>
		<%= link_to_function "Back","resetBetsForm()",:class=>"reset-bets",:onmouseover=>"this.addClassName('reset-bets-hover');",:onmouseout=>"this.removeClassName('reset-bets-hover');"%>
				</div>

		</td>
		
	</tr>
</table>

</div>
<! -- div basketball end-->


<! -- div soccer -->
<div class="sportDivHidden" id="soccerDiv">
    <table>
	<tr>
		<td width="75%">
		<span style="color:#eee;font-size:18px;">Try pick the winner of this game:</span><br/><br/><br/>	

	    <% if @soccerMatchOfTheDay.blank? %>
 			 <div class="empty">There are no football matches right now...</div>
		<% else %>
 			 <%form_tag bets_path(:sport_id=>@sportSoccer),:id=>"bets-form" do %>
 		   <%= hidden_field_tag 'referer',url_for(params) %>
   			   <% @soccerMatchOfTheDay.group_by{|match| match.begin_at.to_date }.each do |time,matches| %>
   			   <%= render :partial=>"matches/matches",:locals=>{:matches=>matches,:time=>time} %>
    		<% end %>
   			 <br/>
 		 <%end %>
  		<% end %>

 		</td>
		<td width="15%" >
			<% if !@soccerMatchOfTheDay.blank? %>
				<div id="betSideSoccer" class="sideDivHidden">
					<br/>
					<%= link_to_function "Place Bet","$('bets-form').submit();",:class=>"place-bets", :onmouseover=>"this.addClassName('place-bets-hover');",:onmouseout=>"this.removeClassName('place-bets-hover');"%>
					<br/>
			<% end %>
			<%= link_to_function "Back","resetBetsForm()",:class=>"reset-bets",:onmouseover=>"this.addClassName('reset-bets-hover');",:onmouseout=>"this.removeClassName('reset-bets-hover');"%>
				</div>

		</td>
	</tr>
	</table> 
</div><! -- div soccer end-->
<br><br><br><br>
</div>

<div class="tutorial-background-bottom">
	<span style="float: right;position:relative;bottom:50px"><%=image_tag"logo.png"%></span>
</div>
<%end%>


  

